<template>
  <div class="tool-bars">
    <div style="position: relative;height: 24px;">
      <preview-tool :context="context" title="预览" />
      <save-tool :context="context" title="保存" />
      <save-as-tool :context="context" title="另存为" />
      <open-tool :context="context" title="打开报表文件" />
      <import-tool :context="context" title="导入Excel模板" />
      <data-source-tool :context="context" title="数据源" />
      <undo-tool :context="context" title="撤销" />
      <redo-tool :context="context" title="重做" />
      <font-family-tool ref="childFontFamilyTool" :context="context" title="字体" />
      <font-size-tool ref="childFontSizeTool" :context="context" title="字号" />
      <bold-tool ref="childBoldTool" :context="context" title="加粗" />
      <italic-tool ref="childItalicTool" :context="context" title="斜体" />
      <underline-tool ref="childUnderlineTool" :context="context" title="下划线" />
      <forecolor-tool :context="context" title="字体颜色" />
      <bgcolor-tool :context="context" title="背景颜色" />
      <border-tool :context="context" title="边框" />
      <merge-tool :context="context" title="合并单元格" />
      <align-left-tool ref="childAlignLeftTool" :context="context" title="左右对齐" />
      <align-top-tool ref="childAlignTopTool" :context="context" title="上下对齐" />
      <freeze-cell :context="context" title="冻结单元格" />
      <image-tool :context="context" title="上传图片" />
      <link-tool ref="childLinkTool" title="单元格链接" :context="context" />
      <settings-tool :context="context" title="页面配置" />
      <form-tool :context="context" title="表单配置" />
    </div>
  </div>
</template>

<script>
import PreviewTool from './PreviewTool'
import SaveTool from './SaveTool'
import SaveAsTool from './SaveAsTool'
import OpenTool from './OpenTool'
import ImportTool from './ImportTool'
import FormTool from './FormTool'
import SettingsTool from './SettingsTool'

import UndoTool from './UndoTool'
import RedoTool from './RedoTool'

import AlignLeftTool from './AlignLeftTool'
import AlignTopTool from './AlignTopTool'

import BorderTool from './BorderTool'
import BoldTool from './BoldTool'
import ItalicTool from './ItalicTool'
import UnderlineTool from './UnderlineTool'
import BgcolorTool from './BgcolorTool'
import ForecolorTool from './ForecolorTool'
import ImageTool from './ImageTool'
import MergeTool from './MergeTool'
import FontFamilyTool from './FontFamilyTool'
import FontSizeTool from './FontSizeTool'
import LinkTool from './LinkTool'
import FreezeCell from './FreezeCell'
import DataSourceTool from './DataSourceTool'

export default {
  name: 'ToolBar',
  components: {
    PreviewTool,
    SaveTool,
    SaveAsTool,
    OpenTool,
    ImportTool,
    FormTool,
    SettingsTool,
    ImageTool,
    UndoTool,
    RedoTool,
    FontFamilyTool,
    FontSizeTool,
    BoldTool,
    ItalicTool,
    UnderlineTool,
    ForecolorTool,
    BgcolorTool,
    BorderTool,
    MergeTool,
    AlignTopTool,
    AlignLeftTool,
    LinkTool,
    FreezeCell,
    DataSourceTool
  },
  props: {
    context: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {

    }
  },
  mounted: function() {

  },
  methods: {
    refresh(rowIndex, colIndex, row2Index, col2Index) {
      const arr = [
        this.$refs.childFontFamilyTool,
        this.$refs.childFontSizeTool,
        this.$refs.childBoldTool,
        this.$refs.childItalicTool,
        this.$refs.childUnderlineTool,
        this.$refs.childAlignLeftTool,
        this.$refs.childAlignTopTool,
        this.$refs.childLinkTool
      ]
      for (const ele of arr) {
        ele.refresh(rowIndex, colIndex, row2Index, col2Index)
      }
    }
  }
}
</script>
<style>
  .icons.icons-16 {
    width: 16px;
    height: 16px;
  }

  .icons-16-undo {
    background-image: url();
  }

  .icons-16-redo {
    background-image: url();
  }

  .icons-16-font_bold {
    background-image: url();
  }

  .icons-16-font_italic {
    background-image: url();
  }

  .icons-16-font_underline {
    background-image: url();
  }

  .icons-16-font_color {
    background-image: url();
  }

  .icons-16-fill_color {
    background-image: url();
  }

  .icons-16-picture {
    background-image: url();
  }

  .icons-16-frozen_cell {
    background-image: url();
  }

  .icons-16-database {
    background-image: url();
  }

  .icons-16-func_database {
    background-image: url();
  }
  
  .icons-16-func {
    background-image: url();
  }
</style>
